---
title: Fonts
description: How to configure fonts in Next.js starter kit.
---

Saas UI uses `Inter` as the default font, but you can easily change it to any
other font.

## Installation

<Info>
  We are using the variable version to reduce the total download size as opposed
  to including specific versions.
</Info>

To install a different font, you can use Font Source or Next.js fonts.

### Font source

```bash
cd apps/web && pnpm install @fontsource-variable/montserrat
```

Next import it in your root layout.

```tsx
// apps/web/app/layout.tsx
import '@fontsource-variable/montserrat'

//....
```

And update your theme to use the new font.

```ts
// packages/theme/src/theme.ts

export const theme = extendTheme(
  {
    fonts: {
      heading: 'Montserrat Variable, sans-serif',
      body: 'Montserrat Variable, sans-serif',
    },
  },
  baseTheme,
)
```

### Next.js fonts

```tsx
// apps/web/app/layout.tsx
import { Montserrat } from 'next/font/google'

const montserrat = Montserrat({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
  fallback: ['sans-serif'],
})

//...
<body className={montserrat.variable}>
//....
</body>
```

And update your theme to use the new font.

```ts
// packages/theme/src/theme.ts

export const theme = extendTheme(
  {
    fonts: {
      heading: 'var(--font-montserrat)',
      body: 'var(--font-montserrat)',
    },
  },
  baseTheme,
)
```
